<template>
    <div class="order">
        <header>
            <el-form :inline="true" :model="queryForm" class="demo-form-inline">
                <el-form-item label="订单号">
                    <el-input v-model="queryForm.orderNo" placeholder="订单号" size="mini"></el-input>
                </el-form-item>

                <el-form-item label="收货人">
                    <el-input v-model="queryForm.consignee" placeholder="收货人" size="mini"></el-input>
                </el-form-item>

                <el-form-item label="手机号">
                    <el-input v-model="queryForm.phone" placeholder="手机号" size="mini"></el-input>
                </el-form-item>

                <el-form-item label="订单状态">
                    <el-select v-model="queryForm.orderState" placeholder="订单状态" size="mini">
                        <el-option label="已受理" value="已受理"></el-option>
                        <el-option label="派送中" value="派送中"></el-option>
                        <el-option label="已完成" value="已完成"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="选择时间">
                    <el-date-picker v-model="queryForm.date" type="datetimerange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" size="mini" value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="cxSubmit" size="mini">查询</el-button>
                </el-form-item>
            </el-form>
        </header>

        <!-- 表格信息 -->

        <el-table :inline="true" :data="tableData" :model="form" style="width: 100%">
            <!-- 订单号 -->
            <el-table-column prop="orderNo" label="订单号" width="150"></el-table-column>
            <!-- 下单日期 -->
            <el-table-column label="下单日期" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                        scope.row.orderTime | datetime
                    }}</span>
                </template>
            </el-table-column>
            <!-- 手机号 -->
            <el-table-column prop="phone" label="手机号" width="120"></el-table-column>
            <!-- 收货人 -->
            <el-table-column prop="consignee" label="收货人" width="120"></el-table-column>
            <!-- 配送地址 -->
            <el-table-column prop="deliverAddress" label="配送地址" width="100"></el-table-column>
            <!-- 送达时间 -->
            <el-table-column label="送达时间" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                        scope.row.deliveryTime | datetime
                    }}</span>
                </template>
            </el-table-column>
            <!-- 用户备注 -->
            <el-table-column prop="remarks" label="用户备注" width="120"></el-table-column>
            <!-- 订单金额 -->
            <el-table-column prop="orderAmount" label="订单金额" width="120"></el-table-column>
            <!-- 订单状态 -->
            <el-table-column prop="orderState" label="订单状态" width="120"></el-table-column>
            <!-- 操作 -->
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="tables(scope.row)" type="text" size="small">查看</el-button>
                    <el-button @click="edits(scope.row)" type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-drawer title="订单详情" :visible.sync="table" direction="btt" size="50%">
            <el-table :data="tableDatas">
                <!-- 订单号 -->
                <el-table-column prop="orderNo" label="订单号" width="150"></el-table-column>
                <!-- 下单日期 -->
                <el-table-column label="下单日期" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{
                            scope.row.orderTime | datetime
                        }}</span>
                    </template>
                </el-table-column>
                <!-- 手机号 -->
                <el-table-column prop="phone" label="手机号" width="120"></el-table-column>
                <!-- 收货人 -->
                <el-table-column prop="consignee" label="收货人" width="120"></el-table-column>
                <!-- 配送地址 -->
                <el-table-column prop="deliverAddress" label="配送地址" width="100"></el-table-column>
                <!-- 送达时间 -->
                <el-table-column label="送达时间" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{
                            scope.row.deliveryTime | datetime
                        }}</span>
                    </template>
                </el-table-column>
                <!-- 用户备注 -->
                <el-table-column prop="remarks" label="用户备注" width="120"></el-table-column>
                <!-- 订单金额 -->
                <el-table-column prop="orderAmount" label="订单金额" width="120"></el-table-column>
                <!-- 订单状态 -->
                <el-table-column prop="orderState" label="订单状态" width="120"></el-table-column>
            </el-table>


        </el-drawer>
        <!-- 修改抽屉1.
        ............................................................................. -->
        <el-drawer title="订单修改" :visible.sync="drawer" :with-header="false">
            <el-form :model="tabEdits" label-width="80px">
                <el-form-item label="ID">
                    <el-input v-model="tabEdits.id"></el-input>
                </el-form-item>

                <el-form-item label="订单号">
                    <el-input v-model="tabEdits.orderNo"></el-input>
                </el-form-item>

                <el-form-item label="下单日期">
                    <el-date-picker v-model="tabEdits.orderTime" type="datetime" placeholder="选择日期时间" format
                    default-time="12:00:00">
                    </el-date-picker>
                </el-form-item>


                <el-form-item label="电话">
                    <el-input v-model="tabEdits.phone"></el-input>
                </el-form-item>

                <el-form-item label="收货人">
                    <el-input v-model="tabEdits.consignee"></el-input>
                </el-form-item>

                <el-form-item label="送货地址">
                    <el-input v-model="tabEdits.deliverAddress"></el-input>
                </el-form-item>

                <el-form-item label="送达时间">
                    <el-date-picker v-model="tabEdits.deliveryTime" type="datetime" placeholder="选择日期时间"  value-format="yyyy-MM-dd HH:mm:ss"
                    default-time="12:00:00">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="备注">
                    <el-input v-model="tabEdits.remarks"></el-input>
                </el-form-item>

                <el-form-item label="订单金额">
                    <el-input v-model="tabEdits.orderAmount"></el-input>
                </el-form-item>

                <el-form-item label="订单状态">
                    <el-select v-model="tabEdits.orderState" placeholder="订单状态" size="mini">
                        <el-option label="已受理" value="已受理"></el-option>
                        <el-option label="派送中" value="派送中"></el-option>
                        <el-option label="已完成" value="已完成"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即修改</el-button>
                    <el-button @click="etx">取消</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
            <el-pagination @size-change="pageSizeChange" @current-change="pageCurrentChange" :current-page="page"
            :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
    </div>
</template>

<script>
import { orderList, detail, edit } from "@/api/order.js";
export default {
    data() {
        return {
            drawer: false,
            queryForm: {}, //查询表单双向绑定对象
            table: false,
            form: {
                Order: "", //订单号
                consignee: "", //收货人
                tel: "", //手机号
                Status: "", //订单状态
            },
            value1: [],
            page: 1, //默认第一页
            currentPage: 1, //当前页码
            pageSizes: [10, 20, 50, 100],
            pageSize: 10, //默认显示多少条
            total: 0, //总条数
            tableData: [
                {
                    id: "", //	订单id
                    phone: "", //手机号
                    orderTime: "", //下单时间
                    consignee: "", //收货人
                    province: "",
                    city: "",
                    deliverAddress: "",
                    orderNo: 0, //订单号
                    deliveryTime: "", //送达时间
                    remarks: "", //用户备注
                    orderAmount: "", //订单金额
                    orderState: "", //订单状态
                },
            ],
            // 订单详情
            tableDatas: [],
            // 修改订单
            tabEdits: {}
        };
    },
    methods: {
        cxSubmit(){
            this.queryForm.date=JSON.stringify(this.queryForm.date);//日期格式转换
            console.log(this.queryForm);
            this.data();
        },
        async  onSubmit() {
            console.log(this.tabEdits);
            // this.tabEdits.deliveryTime = this.$options.filters.datetime(this.tabEdits.deliveryTime);
            // this.tabEdits.orderTime = this.$options.filters.datetime(this.tabEdits.orderTime);
            let res =await edit(this.tabEdits)
            console.log(res);
            this.data();
        },
        // 取消修改
        etx(){
            this.drawer =false;
        },
        //   修改订单
        async edits(row) {
            this.drawer = true;
            this.tabEdits = row
        },
        async tables(row) {
            this.tableDatas = [];
            console.log(row);
            this.table = true;
            let res = await detail({
                id: row.id,
            });

            this.tableDatas.push(res.data.data);
        },
        pageSizeChange(val) {
            this.pageSize = val;
            console.log(`每页 ${val} 条`);
            this.data();
        },
        pageCurrentChange(val) {
            this.currentPage = val;
            console.log(`当前页: ${val}`);
            this.data();
        },
        async data() {
            let res = await orderList({
                currentPage: this.currentPage, //第几页
                pageSize: this.pageSize, //每一页多少条
                orderNo:this.queryForm.orderNo,//订单号
                consignee:this.queryForm.consignee,//收货人
                phone:this.queryForm.phone,//手机号
                orderState:this.queryForm.orderState,//订单状态
                date:this.queryForm.date//日期
            });
            console.log(res);
            this.tableData = res.data.data;
            this.total = res.data.total;



        },

    },
    created() {
        this.data();
    },
};
</script>

<style lang="less" scoped>
.order {
    width: 100%;
    height: 500px;
    background-color: #fff;

    header {
        padding: 15px;
    }

    .el-range-separator {
        width: 30px;
    }

    .time {
        display: flex;
        align-items: center;
        width: 34%;
        justify-content: space-between;
    }
}
</style>
